Easing and duration 緩動和持續時間

緩動和持續時間創造出靈敏而富有表現力的動效

Suggested Easing and Duration Pairs 建議的緩動和持續時間組合

緩動（Easing）和持續時間（Duration）決定介面過渡的流暢度。預設推薦值適用於大多數常見過渡。

緩動方式（Easing）持續時間（Duration）過渡型別（Transition Type）
強調（Emphasized）500ms進入和退出螢幕
強調減速（Emphasized decelerate）400ms進入螢幕
強調加速（Emphasized accelerate）200ms退出螢幕
標準（Standard）300ms進入和退出螢幕
標準減速（Standard decelerate）250ms進入螢幕
標準加速（Standard accelerate）200ms退出螢幕

Easing 過渡緩動

在現實世界中，物體不會瞬間啟動或停止。相反，它們需要時間來加速和減速。沒有緩動效果的過渡看起來生硬且機械，而帶有緩動效果的過渡則顯得更加自然。

Material Design 的緩動比 iOS 更強調視覺表現，起始快但結束柔和。

紫色：在現實世界中，物體不會瞬間啟動或停止，而是逐漸加速和減速。紅色：如果沒有緩動效果，動畫過渡看起來會顯得生硬且機械化，而帶有緩動的過渡則更符合自然規律，使互動更加流暢。

Choosing an easing set 選擇緩動集

強調緩動適用於主要動畫，標準緩動適用於次要動畫。

強調緩動集（Emphasized easing set） 適用於主要的過渡動畫，可以更好地展現 Material Design 的風格。
標準緩動集（Standard easing set） 適用於次要的過渡動畫，它的運動更快、更簡潔。

Choosing an easing type  選擇一種緩動型別

緩動型別是根據過渡相對於螢幕的移動方式來選擇的。

Begin and end on screen 在螢幕上開始和結束

這些過渡效果使用了強調型緩動函式。它會迅速加速，然後緩緩停止，以強調過渡效果的結束。

強調緩動效果

Enter the screen 進入螢幕

這些過渡效果使用強調減速緩動。它從峰值速度開始，然後緩緩停止。

Exit the screen permanently 永久退出螢幕

強調加速緩動從靜止開始，以峰值速度結束，給人一種元件已永久離開的感覺。

Exit the screen temporarily 臨時退出螢幕

強調緩動，讓元件平穩結束，以確保退出的元素可以被恢復

Duration 持續時間

動畫過渡的時長不宜過長或過短，它需要足夠快，以確保使用者能夠看到變化，但也要足夠平滑，避免生硬的跳轉。

✓ 動畫時長要調整得恰到好處，既快又不會讓人難以跟上。
× 不要讓動畫太短，否則過渡會顯得生硬，影響體驗

Choosing a duration 選擇時長

時長的選擇基於三個標準：

1 Transition size 過渡尺寸

小範圍過渡使用較短時長，大範圍過渡則需要較長時長。根據過渡區域調整時長可保持視覺連貫性。

覆蓋區域較小200ms
覆蓋區域較大500ms

2 Enter vs. Exit transitions 進入與退出過渡效果

退出過渡使用較短時長，因為使用者注意力已轉向下一個任務。進入或持續狀態的過渡使用較長時長，讓使用者能關注新內容。